import {designPage, onBeforeUnmount, reactive} from "@peryl/react-compose";
import {BindingVariableCardList, createBindingRunningState, PlainBindingNamespace} from "../../packages";
import {Layout, LayoutSection, PageCard, PageCardContent, PageCardTitle, Scroll} from "plain-design";
import bindingBasicData from './binding-basic.data.json';
import {deepcopy} from "@peryl/utils/deepcopy";
import {useBindingEditorOption} from "../module/cms-visual-editor";
import {createEffects} from "@peryl/utils/createEffects";

export default designPage(() => {

  const option = useBindingEditorOption({ isRunning: false });

  const state = reactive({
    originVariables: bindingBasicData as PlainBindingNamespace.iBindingVariables
  });

  const { effects: bindingRunningEffects } = createEffects();

  /*测试单独使用变量引擎*/
  const bindingRunningState = createBindingRunningState({
    runningOption: option,
    getOriginVariables: () => state.originVariables,
    effects: bindingRunningEffects,
  });

  bindingRunningState.checkBindingVariables();

  const handler = {
    onUpdateBindingVariables: (bindingVariables: PlainBindingNamespace.iBindingVariables) => {
      console.log(deepcopy(bindingVariables));
      state.originVariables = bindingVariables;
      bindingRunningState.checkBindingVariables();
    },
  };

  onBeforeUnmount(() => {bindingRunningEffects.clear();});

  return () => (
    <PageCard style={{ height: '100vh' }}>
      <PageCardTitle title="测试初始化binding editor模块"/>
      <PageCardContent full noPadding>
        <Layout style={{ height: '100%' }}>
          <LayoutSection position="left" modelValue={325}>
            <Scroll>
              <BindingVariableCardList
                bindingEditorOption={option}
                getBindingProvideData={bindingRunningState.getBindingProvideData}
                originVariables={state.originVariables}
                onUpdateBindingVariables={handler.onUpdateBindingVariables}
              />
            </Scroll>
          </LayoutSection>
          <LayoutSection>
            this is content
          </LayoutSection>
        </Layout>
      </PageCardContent>
    </PageCard>
  );
});
